import {
  defineConfig,
  presetWind3,
  presetAttributify,
  transformerDirectives,
  presetIcons,
} from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
import { FileSystemIconLoader } from "@iconify/utils/lib/loader/node-loaders";
import { getIcons } from "./build/index.js";

const icons = getIcons();
export default defineConfig({
  presets: [
    presetWind3(),
    presetAttributify(),
    presetIcons({
      warn: true,
      prefix: ["i-"],
      scale: 1,
      extraProperties: {
        display: "inline-block",
        width: "1em",
        height: "1em",
      },
      collections: {
        base: FileSystemIconLoader("./src/assets/icons/base"),
        biz: FileSystemIconLoader("./src/assets/icons/biz"),
      },
    }),
    presetRemToPx({ baseFontSize: 4 }),
  ],
  transformers: [transformerDirectives()],
  safelist: icons.map((icon) => `${icon} ${icon}?mask`.split(" ")).flat(),
  shortcuts: [
    ["wh-full", "w-full h-full"],
    ["f-c-c", "flex justify-center items-center"],
    ["flex-col", "flex flex-col"],
    [
      "card-border",
      "border border-solid border-light_border dark:border-dark_border",
    ],
    ["auto-bg", "bg-white dark:bg-dark"],
    ["auto-bg-hover", "hover:bg-#eaf0f1 hover:dark:bg-#1b2429"],
    ["auto-bg-highlight", "bg-#eaf0f1 dark:bg-#1b2429"],
    ["text-highlight", "rounded-4 px-8 py-2 auto-bg-highlight"],
  ],
  rules: [
    [
      "card-shadow",
      {
        "box-shadow":
          "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
      },
    ],
  ],
  theme: {
    colors: {
      // 直接映射到 element-plus 的变量
      primary: "var(--el-color-primary)",
      success: "var(--el-color-success)",
      warning: "var(--el-color-warning)",
      danger: "var(--el-color-danger)",
      error: "var(--el-color-error)",
      info: "var(--el-color-info)",
      // 文字颜色
      text: {
        primary: "var(--el-text-color-primary)",
        regular: "var(--el-text-color-regular)",
        secondary: "var(--el-text-color-secondary)",
        placeholder: "var(--el-text-color-placeholder)",
        disabled: "var(--el-text-color-disabled)",
      },
      // 背景颜色
      bg: {
        DEFAULT: "var(--el-bg-color)",
        page: "var(--el-bg-color-page)",
        overlay: "var(--el-bg-color-overlay)",
      },
      border: {
        DEFAULT: "var(--el-border-color)",
        light: "var(--el-border-color-light)",
        lighter: "var(--el-border-color-lighter)",
        extraLight: "var(--el-border-color-extra-light)",
        dark: "var(--el-border-color-dark)",
        darker: "var(--el-border-color-darker)",
      },
    },
  },
});
